<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>新用户注册</title>
		<!-- Tell the browser to be responsive to screen width -->
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!-- Bootstrap 3.3.7 -->
		<link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<!-- Font Awesome -->
		<link rel="stylesheet" href="/static/bower_components/font-awesome/css/font-awesome.min.css">
		<!-- Ionicons -->
		<link rel="stylesheet" href="/static/bower_components/Ionicons/css/ionicons.min.css">
		<!-- Theme style -->
		<link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
		<!-- iCheck -->
		<link rel="stylesheet" href="/static/plugins/iCheck/square/blue.css">

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

		<!-- Google Font -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<!-- bootstrap-validator-->
		<link rel="stylesheet" type="text/css" href="/static/bower_components/bootstrap-validator/css/bootstrapValidator.min.css" />
	</head>

	<body class="hold-transition register-page">
		<div class="register-box">
			<div class="register-logo">
				<a href="../../index2.html"><b>TP</b>后台管理系统</a>
			</div>

			<div class="register-box-body">
				<p class="login-box-msg">注册一个新账号</p>

				<form id="registerForm"  method="post">
					<div class="form-group has-feedback">
						<input type="text" name="username" class="form-control" placeholder="用户名">
						<span class="glyphicon glyphicon-user form-control-feedback"></span>
					</div>
					<div class="form-group has-feedback">
						<input type="email" name="email" class="form-control" placeholder="电子邮箱">
						<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
					</div>
					<div class="form-group has-feedback">
						<input type="password" name="password" class="form-control" placeholder="密码">
						<span class="glyphicon glyphicon-lock form-control-feedback"></span>
					</div>
					<div class="form-group has-feedback">
						<input type="password" name="repassword" class="form-control" placeholder="确认密码">
						<span class="glyphicon glyphicon-log-in form-control-feedback"></span>
					</div>
					<div class="row">
						<div class="col-xs-8">
							<div class="checkbox icheck">
								<label>
              <input type="checkbox"> 同意 <a href="#">协议</a>
            </label>
							</div>
						</div>
						<!-- /.col -->
						<div class="col-xs-4">
							<button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
						</div>
						<!-- /.col -->
					</div>
				</form>

				<a href="/" class="text-center">登陆</a>
			</div>
			<!-- /.form-box -->
		</div>
		<!-- /.register-box -->

		<!-- jQuery 3 -->
		<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap 3.3.7 -->
		<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- iCheck -->
		<script src="/static/plugins/iCheck/icheck.min.js"></script>
		<script src="/static/bower_components/bootstrap-validator/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function() {
						$('input').iCheck({
							checkboxClass: 'icheckbox_square-blue',
							radioClass: 'iradio_square-blue',
							increaseArea: '20%' /* optional */
						});
						$('#registerForm').bootstrapValidator({
							//live: 'disabled',
							message: 'This value is not valid',
							feedbackIcons: {
								valid: 'glyphicon glyphicon-ok',
								invalid: 'glyphicon glyphicon-remove',
								validating: 'glyphicon glyphicon-refresh'
							},
							fields: {
								username: {
									validators: {
										notEmpty: {
											message: '用户名不能为空'
										},
										stringLength: {
											min: 6,
											max: 30,
											message: '用户名必须大于6，小于30个字符长。'
										},
										regexp: {
											regexp: /^[a-zA-Z0-9_\.]+$/,
											message: '用户名只能由字母、数字、点和下划线组成。'
										},
										remote: {
											type: 'POST',
											url: '/admin/index/remote.html',
											message: '用户名已存在'
										},
										different: {
											field: 'password',
											message: '用户名与密码不能相同'
										}
									}
								},
								email: {
									validators: {
										notEmpty: {
											message: '电子邮箱不能为空'
										},
										emailAddress: {
											message: '输入不是有效的电子邮件地址'
										}
									}
								},
								password: {
									validators: {
										notEmpty: {
											message: '密码不能为空'
										},
										identical: {
											field: 'repassword',
											message: '密码和确认密码是不一样的'
										},
										different: {
											field: 'username',
											message: '密码不能与用户名相同'
										}
									}
								},
								repassword: {
									validators: {
										notEmpty: {
											message: '确认密码不能为空'
										},
										identical: {
											field: 'password',
											message: '两次密码不相同'
										},
										different: {
											field: 'username',
											message: '密码不能与用户名相同'
										}
									}
								}
							}
						}).on('success.form.bv', function(e) {
							// Prevent form submission
							e.preventDefault();

							// Get the form instance
							var $form = $(e.target);

							// Get the BootstrapValidator instance
							var bv = $form.data('bootstrapValidator');

							// Use Ajax to submit form data
							$.post($form.attr('action'), $form.serialize(), function(result) {
//								console.log(result);
							}, 'json');

						});
			});
		</script>
	</body>

</html>